<template>
  <div class="bg-gray-100 min-h-screen">
    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-16 text-center">
      <h1 class="text-4xl font-bold animate-fade-in-down">关于我们{{ count }}</h1>
      <p class="text-lg mt-4 animate-fade-in-down delay-100">了解我们的使命、团队和历程</p>
    </div>

    <!-- 使命与愿景 -->
    <div class="container mx-auto py-16 px-4">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <div class="bg-white p-8 rounded-lg shadow-md animate-fade-in-left">
          <h2 class="text-2xl font-bold text-blue-600">我们的使命</h2>
          <p class="mt-4 text-gray-700">
            我们的使命是通过创新的技术和卓越的服务，为客户提供最优质的解决方案。我们致力于解决复杂的问题，推动行业的发展，并为社会创造价值。
          </p>
        </div>
        <div class="bg-white p-8 rounded-lg shadow-md animate-fade-in-right">
          <h2 class="text-2xl font-bold text-blue-600">我们的愿景</h2>
          <p class="mt-4 text-gray-700">
            我们的愿景是成为全球领先的科技公司，以创新为驱动力，不断提升自身的核心竞争力。我们希望通过我们的努力，让世界变得更加美好。
          </p>
        </div>
      </div>
    </div>

    <!-- 团队介绍 -->
    <div class="bg-white py-16">
      <div class="container mx-auto px-4">
        <h2 class="text-2xl font-bold text-center text-blue-600 animate-fade-in-down">我们的团队</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8">
          <div
            v-for="(member, index) in teamMembers"
            :key="member.name"
            class="bg-gray-100 p-8 rounded-lg shadow-md animate-fade-in-up"
            :class="{ 'delay-100': index === 1, 'delay-200': index === 2, 'delay-300': index === 3 }"
          >
            <img
              :src="member.imageUrl"
              :alt="`Team Member ${index + 1}`"
              class="w-24 h-24 rounded-full mx-auto"
            />
            <h3 class="text-xl font-bold text-center text-blue-600 mt-4">{{ member.name }}</h3>
            <p class="text-gray-700 text-center mt-2">{{ member.position }}</p>
            <p class="text-gray-700 mt-4">{{ member.description }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 发展历程 -->
    <div class="container mx-auto py-16 px-4">
      <h2 class="text-2xl font-bold text-center text-blue-600 animate-fade-in-down">发展历程</h2>
      <div class="mt-8">
        <div class="flex flex-col md:flex-row md:space-x-8">
          <div class="bg-white p-8 rounded-lg shadow-md w-full md:w-1/3 animate-fade-in-left">
            <h3 class="text-xl font-bold text-blue-600">2020 年</h3>
            <p class="text-gray-700 mt-4">
              公司成立，开始专注于技术研发和产品创新。
            </p>
          </div>
          <div class="bg-white p-8 rounded-lg shadow-md w-full md:w-1/3 animate-fade-in-up delay-100">
            <h3 class="text-xl font-bold text-blue-600">2021 年</h3>
            <p class="text-gray-700 mt-4">
              推出第一款产品，获得市场的高度认可。
            </p>
          </div>
          <div class="bg-white p-8 rounded-lg shadow-md w-full md:w-1/3 animate-fade-in-right">
            <h3 class="text-xl font-bold text-blue-600">2022 年</h3>
            <p class="text-gray-700 mt-4">
              扩大团队规模，进一步拓展市场份额。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
 import {useCounterStore} from '@/stores/counter';
import { storeToRefs } from 'pinia';
const store = useCounterStore();
// 非响应式
// const { count } = store;
// 响应式
// const count = computed(() => store.count);
// 直接使用 storeToRefs 转换后，不需要再使用 computed
const {count} = storeToRefs(store);
// console.log(count);

// 也可以直接在 template 中使用 store.count
// 例如：{{ store.count }}
// 直接使用 store.$patch() 更新状态
store.$patch({
  count: 100
})
const teamMembers = ref([
  {
    name: '张三',
    position: '首席执行官',
    description: '张三拥有丰富的行业经验和卓越的领导能力，带领团队不断创新和发展。',
    imageUrl: 'https://picsum.photos/200/200'
  },
  {
    name: '李四',
    position: '技术总监',
    description: '李四是一位技术专家，擅长解决各种复杂的技术问题，推动产品的技术升级。',
    imageUrl: 'https://picsum.photos/200/200'
  },
  {
    name: '王五',
    position: '市场总监',
    description: '王五具有敏锐的市场洞察力和出色的营销能力，为公司的市场拓展做出了重要贡献。',
    imageUrl: 'https://picsum.photos/200/200'
  }
]);

onMounted(() => {
  // 可以在这里添加更多的初始化逻辑
});
</script>

<style scoped>
/* 动画关键帧 */
@keyframes fade-in-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画类 */
.animate-fade-in-down {
  animation: fade-in-down 0.5s ease-out forwards;
}

.animate-fade-in-left {
  animation: fade-in-left 0.5s ease-out forwards;
}

.animate-fade-in-right {
  animation: fade-in-right 0.5s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.5s ease-out forwards;
}

/* 延迟动画 */
.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}
</style>    